import React, { useState, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';

import store from '../redux/store';

import { findCinemas } from '@/api/MaiZuo';

export default function Cinema(props) {
  console.log('cinema', props);
  const [list, setList] = useState([]);
  const [cityName] = useState(store.getState().cityName);
  const [cityId] = useState(store.getState().cityId);

  const navigate = useNavigate();

  useEffect(() => {
    findCinemas(cityId).then((res) => {
      setList(res.cinemas);
    });
    return () => {};
  }, [cityId]);

  const handleClick = useCallback(() => {
    navigate('/city');
  }, [navigate]);

  return (
    <div>
      <div onClick={handleClick}>{cityName}</div>
      <ul>
        {list.map((item) => {
          return <li key={item.cinemaId}>{item.name}</li>;
        })}
      </ul>
    </div>
  );
}
